<div class="layui-header">
  <div class="layui-logo layui-hide-xs layui-bg-black">明德小天才</div>
  <!-- 头部区域（可配合layui 已有的水平导航） -->
  <!-- <ul class="layui-nav layui-layout-left">
    移动端显示
    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
      <i class="layui-icon layui-icon-spread-left"></i>
    </li>

    <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
    <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
    <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
    <li class="layui-nav-item">
      <a href="javascript:;">nav groups</a>
      <dl class="layui-nav-child">
        <dd><a href="">菜单 11</a></dd>
        <dd><a href="">菜单 22</a></dd>
        <dd><a href="">菜单 33</a></dd>
      </dl>
    </li>
  </ul> -->
  <ul class="layui-nav layui-layout-right">
    <span class="layui-nav-item">上一次登录时间：{{userInfo.Last_login_time |dealDate}}</span>
    <li class="layui-nav-item layui-hide layui-show-md-inline-block">

      <a href="javascript:;">
        <button id="updAvatar">更换头像</button>
        
        <input type="file" id="avatarFile" style="display: none;">
        <img src="{{userInfo.user_Avatar}}" id="preview" class="layui-nav-img">
        {{userInfo.account_number}}
      </a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;" id="personal-data">个人资料</a></dd>
        <dd><a href="javascript:;" id="head-portrait">设置</a></dd>
        <dd><a href="javascript:;" id="updatePassword">修改密码</a></dd>

        <dd><a href="logout">退出</a></dd>

      </dl>
    </li>
    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
      <a href="javascript:;">
        <i class="layui-icon layui-icon-more-vertical"></i>
      </a>
    </li>
  </ul>
</div>
<script>
  //更改密码
  window.onload = function () {
    // 修改密码
    // 弹窗修改密码的模板
    let htmlStr = `
          <div id="updPasswordContainer">
        <div class="layui-form-item">
          <label class="layui-form-label">原密码</label>
          <div class="layui-input-inline">
            <input type="password" id="oldpassword"   placeholder="请输入新密码" class="layui-input" autocomplete="off" >
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">新密码</label>
          <div class="layui-input-inline">
            <input type="password" id="password"  placeholder="请输入新密码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认新密码</label>
          <div class="layui-input-inline">
            <input type="password" id="repassword"  placeholder="请输入新密码" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>
    `;
    $("#updatePassword").click(function () {
      //页面层
      layer.open({
        title: "修改密码",
        shadeClose: true,
        // skin: 'layui-layer-rim', //加上边框
        area: ['520px', '340px'], //宽高
        content: htmlStr,
        btn: "确认修改",
        yes: function (index, layero) {
          //按钮的回调
          // 获取三个密码
          let oldpwd = $("#oldpassword").val();
          let newpwd = $("#password").val();
          let renewpwd = $("#repassword").val();
          if ([oldpwd, newpwd, renewpwd].includes('')) {
            alert('不能为空')
          }
          if (newpwd !== renewpwd) {
            alert('两次密码不一致')
            // layer.msg('两次密码不一致', { icon: 1 })
          }
          // 发送ajax请求，进行更新密码
          let xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
              // layer.close(index)
              let {
                code,
                message
              } = JSON.parse(this.responseText)
              if (code === 20000) {
                layer.msg(message)
                location.href = "/logout"
              } else {
                alert(message)
              }
            }
          }
          xhr.open('post', '/updatePassword', true)
          xhr.setRequestHeader("Content-type", 'application/x-www-form-urlencoded')
          let formData = `oldpwd=${oldpwd}&newpwd=${newpwd}&renewpwd=${renewpwd}`
          xhr.send(formData)

        }
      });
    })


    // $("#personal-data").click(function () {
    //   //页面层
    //   layer.open({
    //     type: 1,
    //     skin: 'layui-layer-demo', //样式类名  
    //     closeBtn: 0, //不显示关闭按钮
    //     anim: 2,
    //     shadeClose: true, //开启遮罩关闭
    //     area: ['400px', '300px'], //宽高
    //     content: `

    //     <p>账号： {{userInfo.account_number}} </p>
    //     <p>邮箱： {{userInfo.user_mailbox}} </p>
    //     </br>
    //     头像 <input type="file" id="avatarFile" style="display: none;"> <img src="{{userInfo.user_Avatar}}" id="preview" class="layui-nav-img"> <button id="updAvatar">更换头像</button>
    //     `
    //   });
    // })

    let avatarFile = document.getElementById('avatarFile')
    let preview = document.getElementById('preview')
    document.getElementById("updAvatar").onclick = function () {
      avatarFile.click()
    }

    // avatarFile 文件
    avatarFile.onchange = function () {
      let file = this.files[0];
      if (!file) {
        return;
      }
    
// avatarFile.onchange = function () {
//       let file = this.files[0]; // 获取文件的二进制数据
//       if (!file) {
//         return;
//       }
//       let formData = new FormData();
//       formData.append('avatar', file);

//       let xhr = new XMLHttpRequest();
//       xhr.onreadystatechange = function () {
//         if (this.readyState === 4 && this.status === 200) {
//           let data = JSON.parse(this.responseText)
//           let {
//             message,
//             code,
//             src
//           } = data
//           layer.msg(message)
//           // 把服务器返回的图片路径设置img的src中，实现图片预览
//           preview.src = '/' + src;
//         }
//       }
//       xhr.open('post', '/uploadAvatar', true)
//       xhr.send(formData)
//     }
  
      let fromData = new FormData()
      formData.append('avatar', file);
      let xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
          let data = JSON.parse(this.responseText)
          let {
            message,
            code,
            src
          } = data
          layer.msg(message)
          preview.src = '/' + src;

        }
      }
      xhr.open("post", '/uploadAvatar', true)
      xhr.send(formData)
    }

  }

  //更新完毕之后退回到登录页面
  function logout() {
    if (confirm("确认退出"))
      location.href = "/logout"
  }

</script>